<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年07月13日 16:29:25
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class>
    <!-- 条件查询行 -->
    <!-- 账户变更 -->
    <div>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <!-- {{dateTimer}} -->
        <el-date-picker
          v-model="searchForm.time"
          value-format="timestamp"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        ></el-date-picker>
        <el-form-item>
          <el-select
            v-model="searchForm.applyType"
            placeholder="请选择类型"
            style="margin-left:10px"
            clearable
          >
            <el-option label="充值" value="充值"></el-option>
            <el-option label="提现" value="提现"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchForm.userId" placeholder="申请人编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="accountData" stripe style="width: 100%">
        <el-table-column type="index" :index="1" label="序号" width="60"></el-table-column>
        <el-table-column prop="userId" label="申请人编号"></el-table-column>
        <el-table-column label="申请时间">
          <template
            slot-scope="scope"
          >{{moment(scope.row.applyTime).format('YYYY-MM-DD :hh:mm:ss')}}</template>
        </el-table-column>
        <el-table-column prop="applyType" label="变更类型"></el-table-column>
        <el-table-column label="变更资金">
          <template slot-scope="scope">
            <span>￥</span>
            <span class="text">{{scope.row.money}}</span>
            <span>元</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="变更原因"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='通过'">{{scope.row.status}}</el-tag>
            <el-tag type="info" v-else-if="scope.row.status==='未审核'">{{scope.row.status}}</el-tag>
            <el-tag type="danger" v-else>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              class="pass"
              @click="audit(scope.row,'通过')"
              type="text"
              v-if="scope.row.status==='未审核'"
            >通过</el-button>
            <el-button type="text" v-if="scope.row.status==='未审核'" class="unpass"  @click="audit(scope.row,'不通过')">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
let moment = require("moment");
import {
  checkNoPassa,
  checkPass,
  pageQueryAccountApply,
  revokeAccountApply,
  submitAccountApply
} from "@/api/account";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      searchForm: {},
      accountData: [],
      params: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    params: {
      handler() {
        this.accountQuery();
      },
      deep: true
    }
  },
  // 组件方法
  methods: {
    // 审核
    async audit(row,status){
      if(status==='通过'){
        let res=await checkPass({id:row.id})
        // console.log(res);
        
        this.accountQuery();
        this.$message({
          message:res.message,
          type: 'success'
        });
      }else{
        let res=await checkNoPassa({id:row.id});
        this.accountQuery();
         this.$message({
          message:res.message,
          type: 'success'
        });
      }
    },
    toSearch() {
      this.accountQuery();
    },
    moment,
    // 分页模糊查询账户变更
    async accountQuery() {
      let temp = {
        ...this.params,
        ...this.searchForm
      };
      if(temp.time){
        temp.beginTime=temp.time[0];
        temp.endTime=temp.time[1];
        delete temp.time
      }
      for (let key in temp) {
        if (!temp[key]) {
          delete temp[key];
        }
      }
      
      let res = await pageQueryAccountApply(temp);
      // console.log(res);
      this.accountData = res.data.list;
      this.total = res.data.total;
    },
    // 处理分页函数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.params.page = 1;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val;
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.accountQuery();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.pass {
  color: #3a71a8;
  cursor: pointer;
}
.unpass {
  color:#e65d6e;
  cursor: pointer;
}
.el-tag.el-tag--success {
    background-color: #e7faf0;
    border-color: #d0f5e0;
    color: #13ce66;
}
</style>
